// 1.柱状图模块1-就业行业
(function () {
    // 1.准备一个具有宽高的DOM容器
    var el = document.querySelector('.emp .chart');
    // 2.实例化对象
    var myChart = echarts.init(el);
    // 3.指定配置项和数据(直接把百度Echarts实例代码拷贝进来，然后再修改)
    var option = {
        // 5.修改柱子的颜色
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        // 6.修改grid大小
        grid: {
            left: '0',
            top: '10px',
            right: '0',
            bottom: '4%',
            containLabel: true //grid 区域是否包含坐标轴的刻度标签
        },
        xAxis: [{
            type: 'category',
            // 11.修改x轴标签文本
            data: ['考研', '公务员', '快递', 'Java', '前端开发', '游戏开发', '其他'],
            axisTick: {
                alignWithLabel: true
            },
            // 7.修改刻度标签 的相关样式
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: '12'
            },
            // 8.不显示x坐标轴（的样式）
            axisLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value',
            // 9.修改y轴样式
            // 9.1 修改y周刻度标签样式
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: '12'
            },
            // 9.2 修改y坐标轴线的样式
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                    width: 2, //粗细2px
                }
            },
            // 9.3 y轴分割线样式
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        }],
        // 10.修改柱子的样式
        series: [{
            name: '直接访问',
            type: 'bar',
            barWidth: '35%', //粗细
            // 12. 修改数据（实际项目都是AJAX请求的）
            data: [41, 62, 189, 334, 390, 63, 120],
            // 修改柱子圆角
            itemStyle: {
                barBorderRadius: 4
            }
        }]
    };
    // 4.讲配置项设置给echarts实例对象
    myChart.setOption(option);
    // 13. 让图标大小自适应屏幕大小
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

// 2.柱状图模块2-技术需求
(function () {
    var barColors = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#8b78f6', '#65ec70'];
    var el = document.querySelector('.tec .chart');
    var myChart = echarts.init(el);
    var option = {
        grid: {
            top: '10%',
            left: '20%',
            bottom: '10%',
            // containLabel: true //这个不能要
        },
        xAxis: {
            show: false //1.不显示x轴相关信息
        },
        // 11.添加y轴右侧第2组数据
        yAxis: [{
                type: 'category',
                data: ['Vue.js', 'HTML5', '微信小程序', 'React.js', 'Node.js', 'Bootstrap'],
                // y轴线样式
                axisLine: {
                    show: false //2.不显示y轴那条线
                },
                // 刻度样式
                axisTick: {
                    show: false //3.不显示y轴的刻度
                },
                // 4.刻度标签样式
                axisLabel: {
                    color: '#eee'
                },
                inverse: true // 修改数据的渲染顺序
            },
            // 给yAxis新加一个对象，这个属性可以赋值为一个数组
            {
                data: [1, 2, 3, 4, 5, 6],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#eee'
                },
                inverse: true // 修改数据的渲染顺序
            }
        ],
        series: [{
                name: '条',
                type: 'bar',
                data: [92, 89, 84, 78, 64, 36],
                // 修改柱子样式 
                // 5.柱子之间的距离
                barCategoryGap: 50,
                // 6.柱子的宽度
                barWidth: 10,
                // 7.柱子的圆角
                itemStyle: {
                    barBorderRadius: 20,
                    // 9.设置柱子的颜色
                    color: function (params) {
                        // params是柱子对象
                        // dataIndex是当前柱子的索引号
                        // barColors是自己在函数顶上声明的颜色数组
                        return barColors[params.dataIndex];
                    }
                },
                // 8.显示柱子内的文字
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}%' // {c}相当于占位符，会自动把柱子的data数据替换掉
                },
                // 12.1给柱子设置层叠属性，该属性类似于css的z-index，最红效果是实现框压住柱子
                yAxisIndex: 0
            },
            // 10.柱子外边套的框
            {
                name: '框',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 100],
                barCategoryGap: 50,
                barWidth: 15,
                itemStyle: {
                    color: 'none',
                    borderColor: '#00c1de',
                    borderWidth: 3,
                    barBorderRadius: 20
                },
                // 12.2 给第二个柱子对象(框)设置层叠属性
                yAxisIndex: 1
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
    // 更多厉害的图标，可以百度搜索：echarts gallery
})();

// 3.折线图1-粉丝
(function () {
    var el = document.querySelector('.fans .chart');
    var myChart = echarts.init(el);
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            // 2.修改图例组件样式
            textStyle: {
                color: '#4c9bdd' // 图例文字颜色
            },
            right: '10%' // 定位，距离右边10%
        },
        // 1.修改grid总体大小和边框
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true, //显示边框
            borderColor: 'rgba(255, 255, 255, 0.1)', //边框颜色
            containLabel: true // 显示刻度标签文字
        },
        // 3.设置x轴样式
        xAxis: {
            type: 'category',
            boundaryGap: false, // 用来控制第一组数据的渲染位置是不是从0刻度开始
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
            axisTick: {
                show: false // 去除刻度
            },
            axisLabel: {
                color: '#4c9bdd' // 刻度标签文字颜色
            },
            axisLine: {
                show: false // 不显示轴线
            },
        },
        yAxis: {
            type: 'value',
            // 4.设置y轴样式
            axisTick: {
                show: false // 去除刻度
            },
            axisLabel: {
                color: '#4c9bdd' // 刻度标签文字颜色
            },
            axisLine: {
                show: false // 不显示轴线
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)' //分割线颜色
                }
            },
        },
        // 5.设置折线的颜色
        color: ['#56d0e3', '#f57474'],
        // 6.给series添加smooth属性，让折线圆滑，去掉stack属性，不堆叠数据
        series: [{
                name: '东哥粉丝增长量',
                type: 'line',
                data: [104, 154, 98, 112, 257, 296, 347, 242],
                smooth: true // 让折线圆滑
            },
            {
                name: '东哥被吐槽量',
                type: 'line',
                data: [81, 124, 157, 148, 204, 120, 117, 98],
                smooth: true //让折线圆滑
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

// 4.折线图-CET考试
(function () {
    var el = document.querySelector('.cet .chart');
    var myChart = echarts.init(el);
    var option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['CET4', 'CET6'],
            // 1.设置图例样式
            right: '10%',
            textStyle: {
                color: 'rgba(255,255,255,0.5)',
            }
        },
        grid: {
            // 2.设置图表大小
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            show: false
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
            // 3.设置x轴样式
            axisLabel: { //刻度标签
                color: 'rgba(255,255,255,0.6)'
            },
            axisLine: { //轴线
                color: 'rgba(255,255,255,0.6)'
            }
        }],
        yAxis: [{
            type: 'value',
            // 4.y轴样式
            axisTick: {
                show: false
            }, //不现实刻度标签
            axisLabel: { //刻度标签
                color: 'rgba(255,255,255,0.6)'
            },
            axisLine: { //轴线
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            splitLine: { //y轴分割线
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            }
        }],
        series: [
            // 5.修改折线样式
            {
                name: 'CET4',
                type: 'line',
                data: [120, 432, 201, 334, 90, 230, 180, 320, 132, 401, 134],
                smooth: true, // 5.1让折线变圆滑
                lineStyle: { // 5.2单独修改当前线条的样式
                    color: '#0184d5'
                },
                // 5.3填充区域设置为颜色渐变效果                        
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                        [{
                                offset: 0,
                                color: 'rgba(1,132,213,0.4)'
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(1,132,213,0.1)'
                            }
                        ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    )
                },
                // 6.设置拐点样式
                symbol: 'circle', // 拐点形状
                symbolSize: 5, // 拐点大小
                showSymbol: false, // 鼠标放上去才显示拐点
                itemStyle: {
                    color: '#0184d5',
                    borderColor: 'rgba(221, 220, 107, 0.1)',
                    borderWidth: 8
                }
            },
            {
                name: 'CET6',
                type: 'line',
                data: [34, 121, 45, 23, 156, 25, 19, 87, 122, 74, 32],
                smooth: true, //让折线变圆滑
                // 7.设置第2条折线
                lineStyle: { // 单独修改当前线条的样式
                    color: '#00d887'
                },
                // 填充区域设置为颜色渐变效果                        
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0,
                                color: 'rgba(0,216,135,0.4)'
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(0,216,135,0.1)'
                            },
                        ]
                    )
                },
                // 设置拐点样式
                symbol: 'circle', // 拐点形状
                symbolSize: 5, // 拐点大小
                showSymbol: false, // 鼠标放上去才显示拐点
                itemStyle: {
                    color: '#00d887',
                    borderColor: 'rgba(221, 220, 107, 0.1)',
                    borderWidth: 8
                }
            },
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

// 5.饼子图-浏览器占有率
(function () {
    var el = document.querySelector('.browser .chart');
    var myChart = echarts.init(el);
    var colors = ['#73DDFF', '#73ACFF', '#FDD53A', '#FD866A', '#FE5656', '#9E87FF', '#009DFF'];
    var option = {
        tooltip: {
            borderColor: 'rgba(255,255,255,0.3)',
            borderWidth: 1,
            padding: 5,
            trigger: 'item',
            formatter: '{b}<br/>用户数量：{c}<br/>占比：{d}%'
        },
        legend: {
            orient: 'vertical',
            left: '20',
            top: 'center',
            textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 12
            },
            data: ['Chrome', 'QQ浏览器', 'IE浏览器', 'FireFox', '360浏览器', '百度浏览器', '其他']
        },
        series: [{
            name: '面积模式',
            type: 'pie',
            center: ['60%', '50%'], // 圆心坐标位置
            radius: ['50%', '90%'], //
            // avoidLabelOverlap: true, //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
            label: { // 图饼中心文字样式
                show: false, // 平时不显示
                position: 'center'
            },
            emphasis: { //也是图饼中心文字样式
                label: {
                    show: true, // 鼠标放到环上时显示对应标签
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false // 不显示扇形的分割线
            },
            itemStyle: {
                color: function (params) {
                    return colors[params.dataIndex];
                }
            },
            data: [
                {value: 80, name: 'Chrome'},
                {value: 9, name: 'QQ浏览器'},
                {value: 15, name: 'IE浏览器'},
                {value: 8, name: 'FireFox'},
                {value: 20, name: '360浏览器'},
                {value: 5, name: '百度浏览器'},
                {value: 7, name: '其他'}
            ]
        }]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

// 6.雷达图-学生能力
(function () {
    var el = document.querySelector('.ability .chart');
    var myChart = echarts.init(el);
    var option = {
        legend: {
            top: '0',
            right: '0',
            orient: 'vertical',
            textStyle: {
                color: 'rgba(255,255,255,0.5)',
                fontSize: 12,
            },
            data: ['幽鬼', '恶魔巫师'],
            icon: 'roundRect',
        },
        radar: {
            radius: '90%',
            center: ['50%', '52%'],
            startAngle: 0,
            triggerEvent: true,
            name: {
                textStyle: {
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: '12',
                    borderRadius: 3,
                    padding: [20, 15]
                }
            },
            nameGap: '12',
            indicator: [
                {name: '击杀', max: 100},
                {name: '生存', max: 100},
                {name: '团战', max: 100},
                {name: '打钱', max: 100},
                {name: '推塔', max: 100},
                {name: '爆发力', max: 100}
            ],
            splitArea: {
                areaStyle: {
                    // color: ['rgba(0,255,255, 0.1)', 'rgba(0,255,255, 0.2)', 'rgba(0,255,255, 0.3)', 'rgba(0,255,255, 0.4)', 'rgba(0,255,255, 0.5)', 'rgba(0,255,255, 0.6)', ].reverse(),
                    color: ['rgba(0,255,255, 0.6)', 'rgba(0,255,255, 0.5)', 'rgba(0,255,255, 0.4)', 'rgba(0,255,255, 0.3)', 'rgba(0,255,255, 0.2)', 'rgba(0,255,255, 0.1)'],
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowBlur: 30,
                    shadowOffsetX: 10,
                    shadowOffsetY: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,206,209, 0.3)'
                }
            },
            splitLine: {
                lineStyle: {
                    width: 1,
                    color: ['rgba(0,206,209, 0.6)', 'rgba(0,206,209, 0.5)', 'rgba(0,206,209, 0.4)', 'rgba(0,206,209, 0.3)', 'rgba(0,206,209, 0.2)', 'rgba(0,206,209, 0.1)']
                }
            }
        },
        series: [{
                name: '幽鬼',
                type: 'radar',
                areaStyle: {
                    color: 'rgba(127,255,210, 0.5)'
                },
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: 'rgba(127,255,210,0.8)',
                    borderColor: 'rgba(127,255,210,0.2)',
                    borderWidth: 8,
                },
                lineStyle: {
                    color: 'rgba(127,255,210, 0.6)',
                    width: 2
                },
                label: {
                    show: false,
                },
                data: [
                    [62, 86, 92, 50, 41, 50]
                ]
            },
            {
                name: '恶魔巫师',
                type: 'radar',
                areaStyle: {
                    color: 'rgba(255,237,145, 0.5)'
                },
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: 'rgba(255,237,145,0.8)',
                    borderColor: 'rgba(255,237,145,0.2)',
                    borderWidth: 8,
                },
                lineStyle: {
                    color: 'rgba(255,237,145, 0.6)',
                    width: 2
                },
                data: [
                    [74, 45, 56, 70, 35, 92]
                ]
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})()